<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div>
    <div class="display-table-div">
      <el-table
        :data="detailDataList"
        :class="{ 'display-table': true, 'left-tabel': multipleSelect }"
        height="50vh"
        :stripe="true"
        :row-style="getRowStyle"
        :header-cell-style="header_cell_style"
      >
        <el-table-column v-if="showIndexColumn" type="index" label="#" align="center" width="80"></el-table-column>
        <template v-for="propItem in detailPropList" :key="propItem.prop">
          <el-table-column v-bind="propItem" align="center" show-overflow-tooltip>
            <template #default="scope" v-if="propItem.codeMap">
              {{ formatCodeToLabel(scope.row[propItem.prop] || propItem.defaultValue, propItem.codeMap) }}
            </template>
            <template #default="scope" v-else-if="propItem.timeStampFormat">
              {{ formatStampToTime(scope.row[propItem.prop], propItem.timeStampFormat) }}
            </template>
            <template #default="scope" v-else>
              {{ scope.row[propItem.prop] || propItem.defaultValue }}
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-button type="success" size="small" @click="chooseClick(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-table
        :data="returnInfoContainer"
        v-if="multipleSelect"
        ref="rightTabelRef"
        height="50vh"
        :stripe="true"
        class="display-table right-tabel"
        :row-style="getRowStyle"
        :header-cell-style="header_cell_style"
      >
        <el-table-column v-if="showIndexColumn" type="index" label="#" align="center" width="50"></el-table-column>
        <template v-for="propItem in selectedPropList" :key="propItem.prop">
          <el-table-column v-bind="propItem" align="center" show-overflow-tooltip>
            <template #default="scope" v-if="propItem.codeMap">
              {{ formatCodeToLabel(scope.row[propItem.prop] || propItem.defaultValue, propItem.codeMap) }}
            </template>
            <template #default="scope" v-else-if="propItem.timeStampFormat">
              {{ formatStampToTime(scope.row[propItem.prop], propItem.timeStampFormat) }}
            </template>
            <template #default="scope" v-else>
              {{ scope.row[propItem.prop] || propItem.defaultValue }}
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-button type="warning" size="small" @click="deleteSelectedItem(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="footer" v-if="showFooter" :style="{ justifyContent: multipleSelect ? 'apace-between' : 'center' }">
      <el-pagination
        popper-class="detailselect"
        v-model:current-page="page.currentPage"
        v-model:page-size="page.pageSize"
        :page-sizes="[10, 20, 100, 200]"
        layout="total, sizes, prev, pager, next"
        :total="detailDataConut || 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <div class="footer-button" v-if="multipleSelect">
        <el-button type="warning" @click="clearAll">清空</el-button>
        <el-button type="primary" @click="emitMutipleSelectedData">确定({{ returnInfoContainer.length || 0 }})</el-button>
      </div>
    </div>
  </div>
</template>
info
<script>
import { computed, ref } from "vue";
import moment from "moment";
export default {
  props: {
    multipleSelect: {
      //多选还是单选
      type: Boolean,
      require: false,
      default: false
    },
    detailDataList: {
      type: Array,
      required: true
    },
    page: {
      type: Object,
      default: () => ({ currentPage: 1, pageSize: 10 })
    },
    detailPropList: {
      type: Array,
      required: true
    },
    detailDataConut: {
      type: Number,
      required: false,
      default: 0
    },
    showIndexColumn: {
      type: Boolean,
      default: false
    },
    getRowStyle: {
      type: Function,
      // eslint-disable-next-line @typescript-eslint/no-empty-function
      default: () => {}
    },
    header_cell_style: {
      type: Object,
      default: () => ({})
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    allSelectedData: {
      //当前已选的数据
      type: Array,
      require: true,
      default: () => []
    },
    selectedPropList: {
      //已选择表格的表格的列信息
      type: Array,
      require: false,
      default: () => []
    }
  },
  emits: ["selectionChange", "update:page", "emitReturnInfo"],
  setup(props, { emit }) {
    const rightTabelRef = ref(null);
    const handleCurrentChange = currentPage => {
      emit("update:page", { ...props.page, currentPage });
    };
    const handleSizeChange = pageSize => {
      emit("update:page", { ...props.page, pageSize });
    };

    const returnInfoContainer = ref(JSON.parse(JSON.stringify(props.allSelectedData))); //给多选框提供的一个容器,存放选择的数据
    const chooseClick = item => {
      //判断是单选还是多选
      if (props.multipleSelect) {
        //多选只做了存放,并没有emit
        let exsitFlag = false;
        for (let el of returnInfoContainer.value) {
          if (Object.entries(el).toString() === Object.entries(item).toString()) {
            exsitFlag = true;
            break;
          }
        }
        !exsitFlag && returnInfoContainer.value.push(item); //执行这句时,数组内容变多,因此会渲染界面(table的高度因为新增了数据会变高),[渲染界面(table的高度变高)]加入微任务,
        //执行下面这句代码(将table的滑块拉到最下边)时是直接操作dom,属于同步代码,但是此时渲染界面(table的高度变高)还在微任务队列中,未执行,所以这句代码会执行,但是无效,
        //办法就是把这句同步代码,加入宏任务队列中.保证放到[渲染界面(table的高度变高)]后执行就行
        setTimeout(() => {
          rightTabelRef.value.$refs.bodyWrapper.getElementsByClassName("el-scrollbar__wrap")[0].scrollTop = 99999999999999;
        }, 0);
      } else {
        //单选直接将数据emit
        emit("emitReturnInfo", [item]);
      }
    };
    //将数据提供给父组件
    const emitMutipleSelectedData = () => {
      emit("emitReturnInfo", returnInfoContainer.value);
    };
    //格式转换
    const formatCodeToLabel = computed(() => {
      return (title, codemap) => {
        return codemap.find(item => item.value === title)?.title || title;
      };
    });
    const deleteSelectedItem = i => {
      returnInfoContainer.value.splice(i, 1);
    };
    const clearAll = () => {
      returnInfoContainer.value = [];
    };

    //时间戳转换
    const formatStampToTime = computed(() => {
      return (stamp, format = "YYYY-MM-DD HH:mm:ss") => {
        if (stamp == 0 || stamp == null || stamp == "") return "未设置";
        return moment(stamp).locale("zh-cn").format(format);
      };
    });
    return {
      handleSizeChange,
      deleteSelectedItem,
      handleCurrentChange,
      formatCodeToLabel,
      formatStampToTime,
      chooseClick,
      returnInfoContainer,
      emitMutipleSelectedData,
      clearAll,
      rightTabelRef
    };
  }
};
</script>

<style scoped>
.display-table-div {
  display: flex;
}
.left-tabel {
  width: 70%;
  border-right: 1px solid rgb(204 202 202);
}
.right-tabel {
  width: 30%;
}
</style>
